<template>
  <div class="Login">
    <div class="login_box">
     <!-- 头像区域  -->
     <div class="head_portrait">
        <img src="../../static/logo.png" alt="">
     </div>
     <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" label-width="0" class="login_form" 
      :model="loginForm" :rules="loginFormRules" >
        <!-- 用户名 -->
        <el-form-item  prop="username">
         <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item  prop="password">
          <el-input placeholder="请输入密码" show-password type="password" prefix-icon="el-icon-s-goods" 
          v-model="loginForm.password"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btn">
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return{
      //登录表单的数据绑定对象
      loginForm:{
        username:'admin',
        password:'123456'
      },
      // 表单验证规则
      loginFormRules:{
        // 验证用户名是否合法
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        
      }
    }
  },
  methods:{
    //重置表单数据
    resetLoginForm(){
      // console.log(this)
      this.$refs.loginFormRef.resetFields();
    },
    //登录
    login(){
      this.$refs.loginFormRef.validate(async valid => {  //async: 异步方法
        // console.log(valid) //验证valid真假
        if(!valid) return
        // const result = await this.$http.post('login',this.loginForm)  //请求地址：login,请求参数：this.loginForm
        // console.log(result)  //data {}
        const {data:res} = await this.$http.post('login',this.loginForm)  //请求地址：login,请求参数：this.loginForm
        // console.log(res)
        if (res.meta.status !== 200) this.$message.error('登录失败：请检查账号或者密码')
        this.$message.success('登录成功')
        /*
        **1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        ****1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        ****1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        */
        // console.log(res)
        window.sessionStorage.setItem('token', res.data.token)  //键token 和 值res.data.token
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')

        
      })
    }
  }
}
</script>

<style lang="stylus">
.Login
  background #2b4b6b
  height 100%
  .login_box
    width 450px
    height 330px
    background #fff
    position absolute
    left 50%
    top 50%
    transform translate(-50%,-50%)
    // 头像样式
    .head_portrait
      height 130px
      width 130px
      border 1px solid #eee
      position absolute
      left 50%
      transform translate(-50%,-50%)
      padding 10px
      border-radius 50%
      background #fff
      box-shadow 0 0 10px #ddd
      img
        border-radius 50%
        background #eee
        width 100%
        height 100%
    // 登录表单样式
    .login_form  
      position absolute
      bottom 0
      width 100% 
      padding 0 20px
      .btn
        display flex
        justify-content flex-end 
      



</style>
